<template>
  <CommonDialog
    :dialogShow.sync="dialogShow"
    :title="curRow?.id ? '编辑用户' : '新增用户'"
    @makeSure="makeSure"
  >
    <template #content>
      <el-form
        ref="form"
        :model="userForm"
        label-width="80px"
        :rules="rules"
        class="userForm"
      >
        <el-form-item label="姓名：" prop="name">
          <common-input v-model="userForm.name" placeholder="请输入姓名"></common-input>
        </el-form-item>
        <el-form-item label="账户：" prop="account">
          <common-input
            v-model="userForm.account"
            placeholder="请输入账户"
          ></common-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <common-input
            v-model="userForm.password"
            placeholder="请输入密码"
          ></common-input>
        </el-form-item>
        <el-form-item label="角色：" prop="role">
          <common-select
            v-model="userForm.role"
            :options="roleOptions"
            placeholder="请选择角色"
          ></common-select>
        </el-form-item>
      </el-form>
    </template>
  </CommonDialog>
</template>

<script>
export default {
  props: {
    changeDialog: {
      typeof: Boolean,
      default: false,
    },
    curRow: {
      typeof: Object,
      default: () => {
        return {
          id: "",
        };
      },
    },
  },
  created() {
    if (this.curRow.id) {
      const keys = Object.keys(this.curRow);
      keys.forEach((key) => {
        if(key == 'password'){
          this.userForm[key] = '';

        }else{
          this.userForm[key] = this.curRow[key];
        }
      });
    }
  },
  data() {
    return {
      userForm: {
        name: "",
        account: "",
        password: "",
        role: "",
      },
      roleOptions: [
        {
          label: "教练",
          value: "1",
        },
        {
          label: "管理员",
          value: "0",
        },
      ],
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        account: [{ required: true, message: "请输入账户", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        role: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.changeDialog;
      },
      set(v) {
        this.$emit("update:changeDialog", v);
      },
    },
  },
  mounted() {},

  methods: {
    makeSure() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.userForm);
          this.$emit("changeUser", this.userForm)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.userForm {
  color: red;
  ::v-deep {
    .el-form-item__label {
      color: #333;
      font-size: 16px;
      font-weight: medium;
    }
    .el-input {
      width: 380px !important;
    }
  }
}
</style>
